.progress-bar {
    --rail-width: 0%;
    --track-width: 100%;
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 6px;

    &:hover {
        :global .handle {
            opacity: 1;
        }
    }

    :global {
        .rail {
            width: var(--rail-width);
            height: 6px;
            position: relative;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        .handle {
            width: 14px;
            height: 14px;
            border-radius: 7px;
            position: absolute;
            top: -4px;
            right: -7px;
            background-color: #fff;
            border: 1px solid var(--primary-color);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .track {
            width: var(--track-width);
            height: 6px;
            border-radius: 3px;
            background-color: #aaa;
        }
    }
}
